<template>
  <div class="dialog">
    <el-dialog
      @close="handleclose"
      :model-value="centerDialogVisible"
      :title="isadduser ? $t('dialog.adduser') : $t('dialog.edituser')"
      width="40%"
      center
    >
      <el-form ref="adduserRef" :model="adduserForm" :rules="adduserrules" label-width="120px">
        <el-form-item :label="$t(`table.username`)" prop="username">
          <el-input v-model="adduserForm.username" />
        </el-form-item>
        <el-form-item :label="$t(`table.password`)" prop="password" v-if="isadduser">
          <el-input v-model="adduserForm.password" type="password" show-password />
        </el-form-item>
        <el-form-item :label="$t(`table.email`)" prop="email">
          <el-input v-model="adduserForm.email" />
        </el-form-item>
        <el-form-item :label="$t(`table.mobile`)" prop="mobile">
          <el-input v-model="adduserForm.mobile" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="CancelDialogVisible">{{ $t('dialog.cancel') }}</el-button>
          <el-button @click="SureDialogVisible">{{ $t('dialog.submit') }}</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue'

import { ElMessage } from 'element-plus'
import type { FormInstance } from 'element-plus'

import { useI18n } from 'vue-i18n'
import { adduser, edituser } from '@/server/user'
import { adduserFormopt, adduserrulesopt } from '../options'
export default defineComponent({
  props: ['centerDialogVisible', 'isadduser', 'editinfo'],
  setup(props, _) {
    const i18n = useI18n()
    const adduserForm = ref(adduserFormopt)
    const adduserrules = ref(adduserrulesopt)
    const adduserRef = ref<FormInstance>()
    const CancelDialogVisible = () => {
      _.emit('closedialog')
    }
    // 确定组件上是挂在空的数据还是编辑数据
    watch(
      () => props.editinfo,
      (newval) => {
        if (newval.id) {
          adduserForm.value = newval
        }
      },
      {
        immediate: true,
        deep: true
      }
    )
    watch(
      () => props.isadduser,
      (newval) => {
        if (newval) {
          adduserForm.value = {
            username: '',
            password: '',
            email: '',
            mobile: ''
          }
        }
      },
      {
        immediate: true,
        deep: true
      }
    )
    // 添加/编辑用户的具体操作
    const SureDialogVisible = async () => {
      await adduserRef.value?.validate((valid) => {
        if (!valid) {
          return ElMessage.info(i18n.t('message.infoMessage'))
        } else {
          if (props.isadduser) {
            adduser(adduserForm.value).then((res) => {
              if ((res as any).meta.status === 201) {
                ElMessage.success(i18n.t('message.createSuccess'))
                _.emit('updatauserlist')
                adduserRef.value?.resetFields()
              } else {
                ElMessage.error(i18n.t('message.createError'))
                adduserRef.value?.resetFields()
              }
              _.emit('closedialog')
            })
          } else {
            edituser(props.editinfo.id, {
              mobile: adduserForm.value.mobile,
              email: adduserForm.value.email
            }).then((res: any) => {
              console.log(props.editinfo.id, adduserForm.value)
              if ((res as any).meta.status === 200) {
                ElMessage.success(i18n.t('message.editSuccess'))
                _.emit('updatauserlist')
                adduserRef.value?.resetFields()
              } else {
                ElMessage.error(i18n.t('message.editSuccess'))
                adduserRef.value?.resetFields()
              }
              _.emit('closedialog')
            })
          }
        }
      })
    }
    const handleclose = () => {
      // 重置表单
      adduserRef.value?.resetFields()
      _.emit('closedialog')
    }
    return {
      CancelDialogVisible,
      SureDialogVisible,
      adduserRef,
      adduserForm,
      adduserrules,
      handleclose
    }
  }
})
</script>

<style></style>
